<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基础语法3：v-bind属性绑定</title>
    <script src="https://unpkg.com/vue@3"></script>
</head>
<body>
    <div id="app">
      <h1>知识点1：html差值</h1>
      <h3>可以动态渲染DOM节点，常用来处理开发者不可预知或难以控制的DOM结构
        注意：在网页上动态渲染html是是比较危险的，容易造成漏洞被黑客攻击
      </h3>
        <p v-html="vh"></p>
        <h1>知识点2：v-pre指令</h1>
        <h3>1.它可以使代码所在的节点跳过编译
            2.可以利用它跳过没有指令语法的节点，可以加快速度
        </h3>
        <p>例子</p>
        <p>我的工资是{{price}}元</p>
        <p v-pre>我的工资bao保密{{price}}元</p>
        <h1>知识点3:v-bind属性绑定</h1>
        <h3>1.文本插值表达式不能在html属性中使用，如果我们想要动态得调整属性，就需要使用v-bind绑定</h3>
        <p>没有使用v-bind</p>
        <p title="titleName">我没有进行属性绑定</p>
        <p>使用v-bind</p>
        <p v-bind:title="titleName">我进行属性绑，这样我的属性就可以进行动态调整了</p>
        <h3>2.v-bind:可以简写为: </h3>
        <p :title="price">我进行了省略，因为实际运用中使用太多了 </p>
        <h3>3.除了绑定变量外，还可以绑定表达式，执行函数等，注意最后的结果要符合属性自身要求</h3>
        <p>例子1：绑定表达式</p>
        <button :disabled="1+1==9">点击有奖</button>
        <input type="text" :placeholder="false? '请输入':'请录入'">
        <p>例子2:图片动态绑定</p>
        <img :src="imgSrc" alt="">
        <h3>课堂实例:通过改变type值，实现文本框，单选框和复选框切换</h3>
        <p>代码实现</p>
        <input :type="titleName"><br>
        <button @click="titleName='text'">文本框</button>
        <button @click="titleName='radio'">单选框</button>
        <button @click="titleName='checkbox'">复选框</button>
        <h3>课堂小练习：通过动态改变属性，完成字体大小和颜色改变，参考上面例子</h3>
        <span :style="{color:aa,fontSize:size+'px' }">我是一行等待改变的文字</span>
        <button @click="aa='green'">改成绿色</button>
         <button @click="aa='blue'">改成蓝色</button>
          <button @click="aa='pink'">改成粉色</button>
           <button @click="aa='yellow'">改成黄色</button>
            <button @click="size++">字体变大</button>
            <button @click="size--">字体变小</button>
    </div>
</body>
</html>
<script>
    const connApp =Vue.createApp({
    data() {
        return {
            vh:"<p>我是动态生成的html代码</p>",
            price:100,
            titleName:"哈！哈！哈！",
            imgSrc:'./两个兄弟.png',
            titleName:'text',
            aa:'red',
            size:100
        }
    },
    }).mount("#app")
</script>